<template>
  <div class="music-item" @click.stop="playCurrentMusic">
    <div class="music-item-num">
      {{ String(musicIndex + 1).padStart(2, "0") }}
    </div>
    <div class="music-item-info">
      <div class="music-item-info-top">{{ name }}</div>
      <div class="music-item-info-down">{{ artistNames }}</div>
    </div>
    <div class="music-item-playicon" :class="{'music-item-playicon-active':$store.state?.currentMusic?.id===id}"></div>
  </div>
</template>

<script lang='ts'>
import { defineComponent, computed } from "vue";
import { IBaseMusicProps } from "@/type";
import { useStore } from "vuex";

interface IProps extends IBaseMusicProps {
  musicIndex: number;
}

export default defineComponent({
  /** 音乐列表组件 */
  name: "MusicItem",
  props: {
    id: {
      type: Number,
      default: 0,
      required: true,
    },
    musicIndex: {
      default: 0,
      type: Number,
    },
    name: {
      default: "歌曲名称",
      type: String,
      required: true,
    },
    artists: {
      default: () => [],
      type: Array,
      required: true,
    },
    album: {
      default: ()=>({picUrl: '',name:''}),
      type: Object
    }
  },
  setup(props) {
    const $store = useStore();
    /** 格式化歌手列表 */
    const artistNames = computed(() => {
      let names = "";
      props.artists.forEach((item: any) => {
        names += "/" + item.name;
      });
      return names.slice(1);
    });
    /** 点击播放当前歌曲 */
    const playCurrentMusic = () => {
      const musicDetail = {
        id: props.id,
        name: props.name,
        artists: props.artists,
        isPlaying: true,
        album: {picUrl: props.album?.picUrl||'',name: props.album?.name||''}
      };
      $store.commit('setCurrentMusic',musicDetail)
    };
    return {
      artistNames,
      playCurrentMusic,
    };
  },
});
</script>

<style lang='scss' scoped>
.music-item {
  width: 100%;
  height: 55px;
  border-bottom: 1px solid #f2f2f2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  .music-item-num {
    margin: 0 20px 0 10px;
    width: 20px;
    text-align: left;
    flex-shrink: 0;
  }
  .music-item-info {
    width: calc(100% - 100px);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    & > div {
      width: 100%;
      font-weight: 500;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .music-item-info-top {
      height: 25px;
      color: #707070;
    }
    .music-item-info-down {
      height: 18px;
      color: #888;
      font-size: 12px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      &::before {
        content: "";
        width: 12px;
        height: 8px;
        margin-right: 4px;
        background: url("//s3.music.126.net/mobile-new/img/index_icon_2x.png?5207a28…=")
          no-repeat;
        background-size: 166px 97px;
      }
    }
  }
  .music-item-playicon {
    margin: 0 10px;
    width: 30px;
    height: 100%;
    background-image: url("../views/home/images/play.svg");
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center center;
    flex-shrink: 0;
    &-active{
      background-image: url('../views/home/images/stop.svg');
    }
  }
}
</style>